<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		* { margin: 0; padding: 0; }
		img { display: block; }
		.waterfall { position: relative; margin: 0 auto;}
		.pin, .cell { position: absolute; width: 192px; padding: 5px; border: 1px solid #ccc;}
		.pin .cover , .cell .cover { position:relative; overflow: hidden;}
        .pin .cover u,
        .cell .cover u { display:block; position:absolute; bottom:0; height:80px; width:100%; background:url(cover.png) repeat-x; }
		.pin .cover img,
		.cell .cover img { background: url(img_loading.gif) no-repeat center center;}
	</style>
</head>
<body>
	<div class="waterfall"></div>
	<script src="jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		(function($){
			var Waterfall = function(element,url,width) {
				this.elem = $(element);
				this.url  = url;
				this.gap  = 15;
				this.cols = 5;
				this.colH = [];
				this.colW = width;
				this.req  = 4;
				this.cache = [];
				this.start = 0;
				this.init();
			}
			Waterfall.prototype =  {
				constructor : Waterfall,
				init : function(callback) {
					this.elem.css('width',this.colW * this.cols + this.gap * (this.cols-1))
					this.render();
					this.scroll();
				},
				render : function() {
					var t = this,
						$this = this.elem;
					$.getJSON(t.url,function(data){
						$this.append('<img src="loading.gif" class="loading" />')
						//return;
						for (var i = 0; i < data.length; i++) { 
							var temp = data[i];
							t.cache.push(
								'<div class="pin"><div class="cover"><img src="'+ temp.image_url +'" height="'+ temp.image_height +'" width="'+ temp.image_width +'" /></div></div>'
							)
						};
						var html = t.cache.slice(t.cache.length-data.length,t.cache.length);
						$this.append(html);
					}).error(function(textStatus){
						 console.log(textStatus);
					}).success(function(){
						console.log(t.cache.length)
						$('.loading').remove();
						var brick = $('.pin');
						// return;
						for (var i = t.start; i < t.cache.length; i++) {
							// console.log($(brick[i]))
							var $cover = $(brick[i]).find('.cover');
                            if ( $cover.height() > 800 ) $cover.height(800).append('<u/>');
							if ( i < t.cols ) {
								$(brick[i]).css({
									'top' : t.gap + 'px',
									'left' : i * (t.colW + t.gap) + 'px'
								}).css('opacity',0).animate({
									opacity : 1
								},800)
                                t.colH[i] = $(brick[i]).outerHeight() + t.gap;
                            } else {
                                t.colMin = t.indexOf(t.colH,t.min(t.colH));
                                $(brick[i]).css({
                                    'top' : t.colH[t.colMin] + t.gap + 'px',
                                    'left' : t.colMin * (t.colW + t.gap) + 'px'
                                }).css('opacity',0).animate({
									opacity : 1
								},800)
                                t.colH[t.colMin] += $(brick[i]).outerHeight() + t.gap;
                            }
						};
						t.start = i;
                        $this.height(t.colH[t.indexOf(t.colH,t.max(t.colH))]);
					})
				},
				scroll : function() {
					var t = this,
						$this = this.elem;
						$(window).bind('scroll',function(){
							if (t.cache.length>80) {
								$(window).unbind('scroll')
							}
							clearTimeout(t.timer)
							$w = $(window).height();
							$s = $(document).scrollTop();
							$d = $(document).height();
							if ( $w + $s >= $d - 100) {
							t.timer = setTimeout(function(){
									t.render();
								},500)
							}
						})
				},
				min : function(arr) {
					return Math.min.apply( Math, arr );
				},
				max : function(arr) {
					return Math.max.apply( Math, arr );
				},
				indexOf : function(arr,num) {
					if (arr.constructor !== Array) return;
					if (!Array.prototype.indexOf) {
						Array.prototype.indexOf = function(num) {
							for ( var i=0; i<this.length; i++) {
								if (this[i] === num) {
									return i;
									break;
								}
							}
							return -1
						}
					}
					return arr.indexOf(num)
				}
			}
			var wtf = new Waterfall('.waterfall','data.json',204);
		})(window.jQuery)
	</script>
</body>
</html>
